<template>
    <div>
        <div v-if="this.$route.meta.keepAlive">
            <keep-alive>
                <transition name="popup">
                    <router-view />
                </transition>
            </keep-alive>
        </div>
        <div v-if="!this.$route.meta.keepAlive">
            <!-- 搜索框 -->
            <van-search v-model="value" placeholder="请输入搜索关键词" shape="round" @click="fun()" disabled />
            <!-- /搜索框 -->
            <!-- 轮播图 -->
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="v in banner" :key="v.id">
                    <img :src="v.image_url" alt="" width="100%">
                </van-swipe-item>
            </van-swipe>
            <!-- /轮播图 -->
            <!-- 金刚区 -->
            <van-grid :column-num="5">
                <van-grid-item :icon="v.icon_url" :text="v.name" v-for="v in channel" :key="v.id"
                    @click="channel_fun(v.id)" />
            </van-grid>
            <!-- /金刚区 -->
            <!-- 品牌 -->
            <div class="brand topic">
                <h2 class="h2">品牌制造商直供</h2>
                <div class="brand-pic">
                    <div class="brand_pic" v-for="v in brandList" :key="v.id" @click="brand(v.id)">
                        <img :src="v.pic_url" alt="">
                        <h4>{{v.name}}</h4>
                        <span>￥ {{v.floor_price.toFixed(2)}} 元</span>
                    </div>
                </div>
            </div>
            <!-- /品牌 -->
            <!-- 新品 -->
            <div class="goods topic">
                <h2 class="h2">周一周四·新品首发</h2>
                <div class="goods-pic">
                    <div class="goods_pic" v-for="v in newGoodsList" :key="v.id" @click="goods_list(v.id)">
                        <img :src="v.list_pic_url" alt="">
                        <span>{{v.name}}</span>
                        <span>￥ {{v.retail_price}} 元</span>
                    </div>
                </div>
            </div>

            <!-- /新品 -->
            <!-- 人气推荐 -->
            <div class="recommend topic">
                <h2 class="h2">人气推荐</h2>
                <van-card price="699.00元" :desc="v.goods_brief" :title="v.name" :thumb="v.list_pic_url"
                    v-for="v in hotGoodsList" :key="v.id" />
            </div>
            <!-- /人气推荐 -->
            <!-- 专题精选 -->
            <div class="choiceness topic">
                <h2 class="h2">专题精选</h2>
                <div class="choiceness_box">
                    <van-swipe :loop="false" :width="300" :height="200" :show-indicators="false">
                        <van-swipe-item class="choiceness_pic" v-for="v in topicList" :key="v.id">
                            <img :src="v.item_pic_url" alt="" width="100%" height="70%">
                            <div class="choiceness_box_tex">
                                <div>
                                    <h2> {{v.title}} <span>￥ {{v.price_info.toFixed(2)}} 元起</span></h2>
                                </div>
                                <p>{{v.subtitle}}</p>
                            </div>
                        </van-swipe-item>
                    </van-swipe>
                </div>

            </div>
            <!-- /专题精选 -->
            <!-- 居家 -->
            <div class="goods topic" v-for="(v,k) in home" :key="k">
                <h2 class="h2">{{v.name}}</h2>
                <div class="goods-pic">
                    <div class="goods_pic" v-for="(v,k) in home[k].goodsList" @click="goods_list(v.id)" :key="v.id"
                        v-lazy="v.list_pic_url">
                        <img :src="v.list_pic_url" alt="">
                        <span>{{v.name}}</span>
                        <span> ￥ {{v.retail_price}} 元 </span>
                    </div>
                </div>
            </div>
            <!-- /居家 -->
        </div>

    </div>

</template>

<script>
import { HomeList } from "@/request/home.js"
import { Toast } from 'vant';

export default {
    name: 'ShopHome',

    data() {
        return {
            value: '',
            banner: [],
            brandList: [],
            channel: [],
            hotGoodsList: [],
            newGoodsList: [],
            topicList: [],
            home: [],
        };
    },
    //  provide() {
    //     return {
    //         str: this.str
    //     };
    // },

    created() {
        // console.log(this.__proto__);
        Toast.loading({
            message: '加载中...',
            forbidClick: true,
            loadingType: 'spinner',
        });
        HomeList()
            .then(res => {
                this.banner = res.data.data.banner;
                this.brandList = res.data.data.brandList;
                this.channel = res.data.data.channel;
                this.hotGoodsList = res.data.data.hotGoodsList;
                this.newGoodsList = res.data.data.newGoodsList;
                this.topicList = res.data.data.topicList;
                this.home = res.data.data.categoryList;
            }).catch(err => {
                console.log(err);
            })
    },
    methods: {
        fun() {
            // this.$bus.$emit("qwe","123312");
            console.log(this);
            // console.log( this.str);
            // this.str = "qwe"
            // console.log(123);
            // console.log(this.str);
            this.$router.push('/home/popup');
        },
        channel_fun(id) {
            this.$router.push({
                name: 'channel',
                params: {
                    id
                }
            })
        },
        // 品牌
        brand(id) {
            this.$router.push({
                path: '/brand',
                query: {
                    id
                }
            })
        },
        // 商品详情
        goods_list(id) {
            this.$router.push({
                path: '/details',
                query: {
                    id
                }
            })
        }
    },
    mounted() {
        // console.log(this.$refs.bra.offsetWidth);
    }
};
</script>

<style lang="less">
// 轮播
.my-swipe {
    width: 100%;
    // height: 2rem;
}

// 标题样式
.topic {
    margin: 20px 0;
    background-color: #fff;
}

.topic1 {
    background-color: #fff;
}

// h2标签样式
.h2 {
    width: 100%;
    font-size: 20px;
    height: 0.5rem;
    line-height: 0.5rem;
    text-align: center;
    background-color: #fff;
    font-family: 黑体;
}

// 品牌
.brand {
    width: 100%;

    .brand-pic {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;

        .brand_pic {
            width: 49%;
            margin-top: 1%;
            position: relative;
            font-family: 黑体;
            font-size: .14rem;

            img {
                width: 100%;
            }

            h4 {
                position: absolute;
                left: 10%;
                top: 10%;
            }

            span {
                position: absolute;
                left: 10%;
                top: 30%;
                color: #8b0000;
            }
        }
    }
}

// 商品
.goods {

    // height: 300/100rem;
    .goods-pic {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        font-size: 14px;
        font-family: 黑体;

        .goods_pic {
            width: 50%;
            // height: 1.7rem;
            // background-color: aqua;
            display: flex;
            flex-direction: column;
            align-items: center;

            img {
                width: 90%;

            }

            span {
                display: block;
                width: 100%;
                text-align: center;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;

                &:first-of-type {
                    font-size: 14px;
                    color: #333;
                }

                &:nth-of-type(2) {
                    color: #8b0000;
                    margin-top: .1rem;
                    margin-bottom: .3rem;
                }
            }
        }
    }
}

// 推荐
.recommend {
    margin: 0 0 10px;
    background-color: #fff;

    .van-card__title {
        font-size: 18px;
        color: #323233;
        line-height: 18px;
    }

    .van-card__desc {
        font-size: 12px;
        margin-top: .16rem;
    }

    .van-card__price-currency {
        font-size: .12rem;
        color: #8D0000;
    }

    .van-card__price-integer {
        margin-left: .12rem;
        font-size: .12rem;
        color: #8D0000;
    }

    .van-card__price-decimal {
        font-size: .12rem;
        color: #8D0000;
    }
}

// 精选
.choiceness {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    .choiceness_box {
        width: 95%;

        .van-swipe__track {
            height: 250px !important;
        }

        .choiceness_pic {
            padding-right: .1rem;
            font-family: 黑体;

            .choiceness_box_tex {
                // width: 3rem;

                h2 {
                    // width: 100% !important;
                    width: 95%;
                    height: .40rem;
                    line-height: .40rem;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;

                    span {
                        // width: 100%;
                        color: #8b0000;
                    }
                }

                p {
                    width: 2.9rem !important;
                    // width: 2rem;
                    font-size: .14rem;
                    margin-bottom: .1rem;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }
            }
        }
    }

}

// 路由动画
.popup-enter {
    right: -100%;
}

.popup-enter-active {
    transition: all .8s;
}

.popup-enter-to {
    right: 0%;
}
</style>